<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>口碑列表</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column type="index" label="ID" width="80">
          </el-table-column>
          <el-table-column prop="name" label="姓名" width="180">
          </el-table-column>
          <el-table-column prop="tel" label="电话"> </el-table-column>
          <el-table-column prop="time" label="报备时间">
            <template slot-scope="scope">
              {{ scope.row.time | filterDate }}
            </template>
          </el-table-column>
          <el-table-column prop="origin" label="来源">
            <template slot-scope="scope">
              {{ scope.row.origin | filterOrigin }}
            </template>
          </el-table-column>
          <el-table-column prop="beizhu" label="备注"> </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                @click="
                  $router.push({ path: 'kbedit', query: { id: scope.row.id } })
                "
                >编辑</el-button
              >
              <el-button size="mini" type="danger" @click="delkb(scope.row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <div class="pages mt-3">
          <el-pagination
            layout="total, prev, pager, next, jumper, sizes"
            :page-sizes="[10, 20, 30, 40, 50]"
            :total="total"
            :current-page="curr"
            :page-size="limit"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
          >
          </el-pagination>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import "@/utils/filter.js";
import { getkb, delkb, getkbtotal } from "@/api/koubei";
export default {
  data() {
    return {
      tableData: [],
      curr: 1,
      limit: 10,
      total: ""
    };
  },
  created() {
    this.getkblist();
    getkbtotal().then((r) => {
      console.log(r.data);
      this.total = r.data.total;
    });
  },
  methods: {
    delkb(id) {
      // console.log(id);
      delkb(id).then((r) => {
        // console.log(r);
        if (r.data.code === 0) {
          this.$message({
            type: "success",
            message: "删除成功！",
          });
          this.getkblist();
        }
      });
    },
    getkblist() {
      getkb(this.curr, this.limit).then((r) => {
        // console.log(r.data.list);
        this.tableData = r.data.list;
      });
    },
    handleCurrentChange(val) {
      this.curr = val;
      this.getkblist();
    },
    handleSizeChange(val) {
      this.limit = val;
      this.getkblist();
    },
  },
};
</script>

<style lang="scss" scoped>
</style>